<template>
  <a-drawer
    width="700px"
    placement="right"
    :title="title"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    @close="cancel"
  >
    <div class="eip-drawer-body beauty-scroll">
      <a-spin :spinning="spinning">
        <div class="padding">
          <a-space class="margin-bottom-sm">
            <a-button size="small" @click="titleWorkflowTypeName" type="primary"
              >{流程类型名称}</a-button
            >
            <a-button size="small" @click="titleCurrentUser" type="primary"
              >{当前用户}</a-button
            >
            <a-button
              size="small"
              @click="titleCurrentUserOrganization"
              type="primary"
              >{当前用户组织名称}</a-button
            >
            <a-button size="small" @click="titleField" type="primary"
              >{表单名称}</a-button
            >
            <a-button size="small" @click="titleDatetime" type="primary"
              >{当前时间}</a-button
            >

            <a-button size="small" @click="titleColumn" type="primary"
              >{表单字段}</a-button
            >
          </a-space>
          <editor
            ref="editor"
            v-if="tinymce.show"
            v-model="form.titlerule"
            :height="tinymce.height"
            :toolbar="tinymce.toolbar"
            :plugins="tinymce.plugins"
            :menubar="tinymce.menubar"
          ></editor>
        </div>
      </a-spin>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>

    <chosen-column
      ref="chosenContent"
      v-if="content.visible"
      :visible.sync="content.visible"
      :data="column"
      title="业务数据"
      @ok="contentOk"
    ></chosen-column>
  </a-drawer>
</template>
<script>
import chosenColumn from "@/pages/workflow/process/activity/components/user/components/column";
import editor from "@/components/tinymce/index.vue";
export default {
  name: "titlerule",
  components: {
    chosenColumn,
    editor,
  },
  data() {
    return {
      bodyStyle: {
        padding: "1px",
      },
      tinymce: {
        plugins: "preview  fullscreen code",
        toolbar: "undo redo |fullscreen|code",
        height: 200,
        show: false,
        menubar: "",
      },

      form: {
        titlerule: "您有一条待审批流程",
        titleruleTxt: "您有一条待审批流程",
      },
      content: {
        visible: false,
      },
      loading: false,
      spinning: false,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    column: {
      type: Array,
    },
    edit: Object,
    title: {
      type: String,
    },
  },
  mounted() {
    this.find();
    setTimeout(() => {
      this.tinymce.show = true;
    }, 10);
  },
  methods: {
    /**
     * 内容选择
     */
    contentOk(value) {
      this.$refs.editor.insert("{表单字段" + value[0].key + "}");
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
    /**
     * 当前用户
     */
    titleCurrentUser() {
      this.$refs.editor.insert("{当前用户名}");
    },

    /**
     * 当前用户组织架构名称
     */
    titleCurrentUserOrganization() {
      this.$refs.editor.insert("{当前用户组织架构名称}");
    },

    /**
     * 流程类型名称
     */
    titleWorkflowTypeName() {
      this.$refs.editor.insert("{流程类型名称}");
    },

    /**
     * 当前时间
     */
    titleDatetime() {
      this.$refs.editor.insert("{当前时间}");
    },

    /**
     *
     */
    titleColumn() {
      this.content.visible = true;
    },

    /**
     * 表单名称
     */
    titleField() {
      this.$refs.editor.insert("{表单名称}");
    },

    /**
     * 保存
     */
    save() {
      let that = this;
      that.form.titleruleTxt = that.$refs.editor.getTxt();
      that.$emit("ok", that.form);
      that.cancel();
    },

    /**
     *
     */
    find() {
      this.form = this.edit;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
